<template>
 <div class="news-container">
   <div class="common-content news-box" >
     <img class="xwdt-img" src="/images/xwdt.png">
     <k-tabs @change="changeTabs" :list="tabList"></k-tabs>
     <div class="news-content" v-if="firstNews.id">
       <div class="left-news" @click="handleDetails(firstNews)">
         <div class="img-box">
           <img class="cover-img"  :src="$TOOL.filterUrl(firstNews.imgLogo)">
         </div>

         <div class="news-info">
           <div class="df-sc">
             <h1 class="title line-1">{{$TOOL.richTextWithUrlsRemove(firstNews.title)}}</h1>
             <div class="time">
               <p class="ft-22 text-bold">{{ $TOOL.dateFormat(firstNews.createDate,'DD') }}  </p>
               <p>{{ $TOOL.dateFormat(firstNews.createDate,'YYYY-MM')  }}</p>
             </div>
           </div>

           <p class="content line-2" v-html="$TOOL.richTextWithUrlsRemove(firstNews.informationContent)"></p>
           <div class="more-box">
             <p>
               <span >{{teamEnum[firstNews.teamId]}}</span>
             </p>
             <p>
               <span style="margin-left: 16px;" class="label" @click.stop="jumpMore" >更多>></span>
             </p>
           </div>
         </div>
       </div>
       <ul class="right-news">
         <li class="mask-box " @click="handleDetails(item)" v-for="(item,index) in state.newsList" :key="index">
           <div  class="item" v-if="index!==0">
             <div class="time_box">
               <p class="month">{{ $TOOL.dateFormat(firstNews.createDate,'MM.DD') }}</p>
               <p>{{ $TOOL.dateFormat(firstNews.createDate,'YYYY')  }}</p>
             </div>
             <div class="info">
               <h4 class="line-2" >{{$TOOL.richTextWithUrlsRemove(item.title)}}</h4>
               <p class="line-2 info-sub" v-html="$TOOL.richTextWithUrlsRemove(item.informationContent)"></p>
             </div>
           </div>
         </li>
       </ul>
     </div>
   </div>
 </div>
</template>

<script setup>
import {reactive,computed,onMounted} from "vue";
import KTabs from "@/components/k-tabs.vue";
import {homeApi} from '@/api'
import {useRouter} from "vue-router";

const state=reactive({
  newsList:[],
  currentIndex:0,
  resultList:[],
})
const firstNews=computed(()=>{
  return state.newsList?.[0]||{}
})
const tabList=[
    {
      name:'团队新闻',
      type:'',
    },
    {
      name:'全省动态',
      type:'',
    },
    {
      name:'市场行情',
      type:'',
    },
]
const teamEnum={
  "0c64d511-7cdc-406b-846f-eda3bce52f53": "蚕桑",
  "1": "所有团队",
  "122ef850-bb57-4fe3-ba5e-cc8e246b5d85": "薯类",
  "29dc577b-ad6b-48da-8c7e-552543f2c488": "饲草",
  "2b544df1-d406-40d5-bb8e-cb8c7bdcbade": "油菜",
  "35eaac11-a60e-449b-9868-2b9518dcf025": "水稻",
  "3623b725-9f13-4e34-bd70-7b0188bb59e4": "生猪",
  "4832b207-f9d4-4230-a08a-cd0058c0b566": "道地中药材",
  "50564222-0322-44b2-8a99-bbb34b567844": "水果",
  "6298197d-9006-4c3c-ad26-c4daf1b656d3": "食（药）用菌",
  "62ec29aa-aa59-4f90-90de-42c9a0300827": "蔬菜",
  "64cbfe34-066d-4687-8a12-99cdd0c9651c": "肉牛",
  "709c25e1-6f48-4d22-af94-54ce447ed14e": "豆类杂粮",
  "72fe160c-88fb-464e-9d46-d107b0ee4fc4": "茶叶",
  "9710df80-953e-4911-95ae-eb1d9bec2be4": "玉米",
  "9f31923a-7bfd-464f-912b-a09ae7224a74": "肉羊",
  "a0f50ee4-1fe2-4fe8-ba90-35d87744d1b0": "兽药",
  "b8ca235c-90e2-4088-b8b6-4c84a17b621b": "特色经作创新团队",
  "d50a34d8-3afd-4a38-bae7-a5c23b38d238": "南亚作物创新",
  "ee9b87fc-76c3-4b04-b1e2-6c84ea9bf7a1": "麦类",
  "f0b306d9-901f-422a-b4ae-f28b64575f7d": "淡水鱼"
}
const changeTabs=(index)=>{
  state.currentIndex=index
  state.newsList=state.resultList[state.currentIndex]
}
onMounted(getData)
async function getData(){
  const res=await homeApi.teamNews.get()
  state.resultList=[res.team,res.province,res.marketplace]
  state.newsList=state.resultList[state.currentIndex]
}
const router=useRouter()

function handleDetails(item){
  router.push({
    path:'/details',
    query :{
      type:1,
      id:item.id
    }
  })
}

function jumpMore(){
  let path='list'
  if(state.currentIndex!==0){
    path='industry'
  }
  router.push({
    path,
    query :{
      moduleType:'9eacb2c4-cbfe-488c-aefd-f6268781c8e7',
      type:state.currentIndex
    }
  })
}
</script>

<style scoped lang="scss">
.news-container{
  background: #FFFFFF;
  width: 100%;
  .news-box{
    background: #ffffff;
    padding: 32px;
    .xwdt-img{
      width: 100%;
      display: block;
      margin-bottom: 32px;
    }
    .news-content{
      display: flex;
      margin-top: 30px;
      align-items: flex-start;
      .left-news{
        width: 50%;
        overflow: hidden;
        cursor: pointer;
        .img-box{
          width: 100%;
          overflow: hidden;
          .cover-img{
            width: 100%;
            display: block;
            height: 282px;
            object-fit: cover;
            transition: all linear .35s;
          }
        }

        &:hover{
          background: #015293;
          .cover-img{
            transform: scale(1.05);
          }
          .news-info{
            color: #999999;
            .label{
              color: #fff;
            }
            .title{
              color: #fff;
            }
            .content{
              color: #fff;
            }
            .more-box{

            }
          }
        }
        .news-info{
          padding: 10px 16px;
          color: #999999;
          .label{
            color: #333333;
          }
          .time{
            text-align: center;
            padding: 2px 4px;
            color: #015293;
            background: #E3E3E3;
          }
          .title{
            flex: 1;
            margin-right: 30px;
            font-weight: bold;
            color: #015293;
            font-size: 22px;
          }
          .content{
            margin-bottom: 35px;
            color: #333;
            text-indent: 20px;
            font-size: 14px;
            margin-top: 6px;
          }
          .more-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;

          }
        }

      }
      .right-news{
        width: 200px;
        flex: 1;
        margin-left: 16px;
        li:nth-child(3){
          --bg-color: #60B9AA;
        }
        li:nth-child(4){
          --bg-color: #60B9AA;
        }
        li{
          background: #F5F5F5;
        }
        .item{
          width: 100%;
          padding: 16px 10px;
          margin-bottom: 20px;
          display: flex;
          position: relative;
          z-index: 2;
          &:hover{
            .time_box{
              border-bottom: 1px solid #FFFFFF;
            }
            h4{
              color: #FFFFFF;
            }

          }
          .time_box{
            color: #FFFFFF;
            width: 65px;
            height: 65px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-color);
            border-bottom: 1px solid var(--bg-color);
            .month{
              font-size: 22px;
              font-weight: bold;
            }
          }
          .info{
            width: 200px;
            flex:1;
            margin-left: 16px;
            font-size: 14px;
            text-indent: 20px;
            .info-sub{
              line-height: 24px;
            }
            h4{
              font-size: 18px;
              text-indent: 0px;
              margin-bottom: 8px;
            }
            p{
              color: #333;
            }
          }

        }
      }
    }
  }
}

</style>
